@import "settings";

// root widget area editor container
.WidgetAreaEditor {
	h2 {
		
	}
	p {
		margin-bottom: 15px;
	}
}

// base styles for a widget
.Widget {
	padding: 0 7px 7px 7px;
	margin: 16px 0 16px 0;
	color: #1f1f1f;
	background-color: #b0bec7;
	background-image: url('');
	background-size: 100%;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #92a5b2));
	background-image: -webkit-linear-gradient(#b0bec7, #92a5b2);
	background-image: -moz-linear-gradient(#b0bec7, #92a5b2);
	background-image: -o-linear-gradient(#b0bec7, #92a5b2);
	background-image: linear-gradient(#b0bec7, #92a5b2);
	border-top: 1px solid #c2cdd4;
	border-bottom: 1px solid #748d9d;
	@include border-radius(3px);
	h3 {
		margin: 0;
		padding: 0;
		line-height: 40px;
		text-shadow: #bfcad2 1px 1px 0;
		@include transition-property(background-image);
		@include transition-duration(0.2s);
		@include transition-timing-function(ease-out);
	}
	.widgetDescription {
		background: #eceff1;
		padding: 5px 5px 1px 5px;
		margin: 0;
		@include border-radius(3px);
	}
	.widgetFields {
		background: #eceff1;
		padding: 5px;
		margin: 7px 0 0 0;
		@include border-radius(3px);
	}
}

// container for available widgets
.availableWidgetsHolder {
	width: 38%;
	float: left;
}

.availableWidgets {
	.Widget {
		h3 {
			cursor: pointer;
			background-image: url('');
			background-position: center right;
			background-repeat: no-repeat;
			&:hover {
				background-image: url('');
			}
		}
	}
}

// container for used widgets
.usedWidgetsHolder {
	width: 60%;
	float: right;
}

.usedWidgets {
	.Widget {
		h3 {
			cursor: move;
		}
		.deleteWidget {
			text-align: right;
			padding-top: 11px;
			margin-bottom: 3px;
		}
	}
}

.noWidgets {
	
}

// one column layout when space is limited
@media only screen and (max-width: 1279px) {
	.availableWidgetsHolder {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	.usedWidgetsHolder {
		width: 100%;
		float: none;
	}
}